<template>
  <view class="order-list">
    <scroll-view
      scroll-y
      :style="{ height: `calc(100vh - ${getSystemInfo.navBarHeight}px - 44px - 70rpx - 170rpx)` }"
      @scrolltolower="onScrollToLower"
    >
      <u-checkbox-group placement="column" v-model="checked">
        <order-item
          v-for="item in listData"
          checkbox
          :key="item.orderId"
          :order-id="item.orderId"
          :order-no="item.orderNo"
          :invoice-state="item.invoiceState"
          :order-items="item.orderItemsList"
        ></order-item>
      </u-checkbox-group>
      <view class="load-more">
        <u-loadmore :status="loadingStatus" :font-size="28" :icon-size="28" />
      </view>
    </scroll-view>
    
    <view class="ol-footer">
      <!-- 全选 -->
      <view class="check-all">
        <u-checkbox-group v-model="checkedAll" @change="onCheckAll">
        	<u-checkbox
            name="all"
            size="18px"
            icon-size="14px"
            label-size="14px"
            shape="circle"
            label="全选">
          </u-checkbox>
        </u-checkbox-group>
      </view>
      
      <view class="content">
        <view>
          <text>已选{{ checked.length }}个订单</text>
        </view>
        <view class="price">
          <text>预计金额共：</text>
          <text class="symbol">¥</text>
          <text class="number">{{ formatMoney(invoiceAmount) }}</text>
        </view>
      </view>
      
      <view class="submit-button">
        <u-button
          type="primary"
          text="去开票"
          @click="toDrawInvoice">
        </u-button>
      </view>
    </view>
    
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  import { formatMoney } from '@/common/utils'
  import orderItem from './orderItem.vue'
  
  export default {
    name: 'order-list',
    components: {
      orderItem
    },
    data() {
      return {
        // 列表请求参数
        listParams: {
          pageNum: 1,
          pageSize: 100
        },
        
        // 加载状态 loadmore-加载前，loading-加载中，nomore-无数据
        loadingStatus: 'loadmore',
        
        // 列表数据
        listData: [],
        
        // 选中的
        checked: [],
        
        // 全选 选中['all']
        checkedAll: [],
      }
    },
    computed: {
      ...mapGetters('global', ['getSystemInfo']),
      ...mapState('user', ['userInfo']),
      
      // 是否全选中
      isCheckedAll() {
        return this.listData.every(item => {
          return this.checked.includes(item.orderId)
        })
      },
      
      // 开票金额总计
      invoiceAmount() {
        const checked = this.listData.filter(item => {
          return this.checked.includes(item.orderId)
        })
        return checked.reduce((acc, cur) => {
          acc += cur.invoiceAmount
          return acc
        }, 0)
      }
    },
    methods: {
      // 获取申请记录列表
      async getList() {
        if (this.loadingStatus === 'loading') {
          return
        }
        try {
          this.loadingStatus = 'loading'
          const { pageNum, pageSize } = this.listParams
          const userId = this.userInfo.id
          const { datas } = await this.$request({
            url: '/order-center/invoice/detail/list',
            data: { pageNum, pageSize, userId }
          })
          if (pageNum === 1) {
            this.listData = []
            await this.$nextTick()
            this.listData = datas.data
          } else {
            this.listData.push(...datas.data)
          }
          // await this.$nextTick()
          this.loadingStatus = datas.data.length < pageSize ? 'nomore' : 'loadmore'
        } catch (err) {
          this.loadingStatus = 'nomore'
        }
      },
      
      // 跳开票页
      toDrawInvoice() {
        const { checked, invoiceAmount } = this
        if (checked.length > 0) {
          uni.navigateTo({
            url: '/minePack/function/invoice/drawInvoice?type=mine',
            events: { update: this.reset },
            success: (res) => {
              res.eventChannel.emit('drawInvoice', { ids: checked, invoiceAmount })
            }
          })
        } else {
          this.$refs.uToast.show({ message: '请选择需要开票的订单', position: 'top' })
        }
      },
      
      // 重置
      reset() {
        this.listParams.pageNum = 1
        this.loadingStatus = 'loadmore'
        this.getList()
      },
      
      // 改变全选
      onCheckAll(checked) {
        if (checked[0] === 'all') {
          this.checked = this.listData.map(item => item.orderId)
        } else {
          this.checked = []
        }
      },
      
      // 滚动到底部
      onScrollToLower() {
        if (this.loadingStatus === 'loadmore') {
          this.listParams.pageNum += 1
          this.getList()
        }
      },
      formatMoney,
    },
    watch: {
      isCheckedAll(isChecked) {
        this.checkedAll = isChecked ? ['all'] : []
      }
    }
  }
</script>

<style scoped lang="scss">
.order-list {
  .load-more {
    padding: 0 0 15rpx;
  }
  .ol-footer {
    box-sizing: border-box;
    height: 160rpx;
    padding: 10rpx 32rpx env(safe-area-inset-bottom);
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24rpx;
    
    .check-all {}
    
    .content {
      font-size: 24rpx;
      flex: 1;
      .price {
        color: $uni-primary;
        .symbol {
          font-size: 22rpx;
          margin-right: 2px;
        }
        .number {
          font-size: 30rpx;
        }
      }
    }
    
    .submit-button {
      width: 215rpx;
    }
  }
}
</style>
